Component({
  properties: {
    width: {
      type: String,
      value: "100vw",
    },
    height: {
      type: String,
      value: "100vh",
    },
    background: {
      type: String,
      value: "#fff",
    },
  },

  data: {
    canvas: null,
    ctx: null,
    moveFlag: false,
    upof: {},
    radius: 0,
    has: [],
    startof: null,
    lineMax: 8,
    lineMin: 2,
    linePressure: 1.5,
    smoothness: 20,
    history: [],
  },

  lifetimes: {
    attached() {
      this.createSelectorQuery()
        .select("#canvasId")
        .fields({
          node: true,
          size: true,
        })
        .exec(this.init.bind(this));
    },
  },

  methods: {
    init: function (res) {
      const canvas = res[0].node;
      const ctx = canvas.getContext("2d");

      this.data.canvas = canvas;
      this.data.ctx = ctx;

      const dpr = wx.getSystemInfoSync().pixelRatio;
      canvas.width = res[0].width * dpr;
      canvas.height = res[0].height * dpr;
      ctx.scale(dpr, dpr);
    },
    downEvent: function (e) {
      console.log("123123");
      this.data.moveFlag = true;
      this.data.has = [];
      this.data.upof = this.getXY(e);
      this.data.startOf = this.data.upof;
    },
    getXY: function (e) {
      var et = e.touches ? e.touches[0] : e;
      var x = et.x;
      var y = et.y;
      return {
        x: x,
        y: y,
      };
    },
    distance: function (a, b) {
      var x = b.x - a.x,
        y = b.y - a.y;
      return Math.sqrt(x * x + y * y);
    },
    moveEvent: function (e) {
      console.log("move");
      if (!this.data.moveFlag) {
        return;
      }
      var of = this.getXY(e);
      var up = this.data.upof;
      var ur = this.data.radius;
      this.data.has.unshift({
        time: new Date().getTime(),
        dis: this.distance(up, of),
      });
      var dis = 0;
      var time = 0;
      for (var n = 0; n < this.data.has.length - 1; n++) {
        dis += this.data.has[n].dis;
        time += this.data.has[n].time - this.data.has[n + 1].time;
        if (dis > this.data.smoothness) break;
      }
      var or =
        Math.min(
          (time / dis) * this.data.linePressure + this.data.lineMin,
          this.data.lineMax
        ) / 2;
      this.data.radius = or;
      this.data.upof = of;
      if (dis < 7) return;
      if (this.data.startOf) {
        up = this.data.startOf;
        ur = or;
        this.data.startOf = null;
        this.data.history.push([]);
      }
      var len = Math.ceil(this.distance(up, of) / 2);
      for (var i = 0; i < len; i++) {
        var x = up.x + ((of.x - up.x) / len) * i;
        var y = up.y + ((of.y - up.y) / len) * i;
        var r = ur + ((or - ur) / len) * i;
        this.data.ctx.beginPath();
        this.data.ctx.arc(x, y, r, 0, 2 * Math.PI, true);
        this.data.ctx.fillStyle = "#000";
        this.data.ctx.strokeStyle = "rgba(1,1,1,0)";
        this.data.ctx.fill();
        this.data.ctx.stroke();
        this.data.history[this.data.history.length - 1].push(x, y, r);
      }
    },
    upEvent: function (e) {
      this.data.moveFlag = false;
    },
    clear: function () {
      this.data.history = [];
      this.data.ctx.clearRect(
        0,
        0,
        this.data.canvas.width,
        this.data.canvas.height
      );
    },
    historyBack: function () {
      this.data.history.pop();
      this.data.ctx.clearRect(
        0,
        0,
        this.data.canvas.width,
        this.data.canvas.height
      );
      for (var i = 0; i < this.data.history.length; i++) {
        var h = this.data.history[i];
        for (var j = 0; j < h.length; j += 3) {
          this.data.ctx.beginPath();
          this.data.ctx.arc(h[j], h[j + 1], h[j + 2], 0, 2 * Math.PI, true);
          this.data.ctx.fill();
        }
      }
    },
  },
});
